import { Directive, ElementRef, Input, SimpleChange } from '@angular/core';
import { ECharts, init } from 'echarts';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';

@Directive({
    selector: '[appEchartsReflection]',
})
export class EchartsReflectionDirective {
    @Input() appEchartsDoubleYLine: any; // 图表配置参数
    destroy$ = new Subject();
    chart: ECharts;
    constructor(public el: ElementRef) {}

    getBarColor(e, p) {
        if (p == 'color') {
            if (e == 0) {
                return '#05D5FF';
            } else if (e == 1) {
                return '#00C824';
            } else if (e == 2) {
                return '#FED833';
            } else if (e == 3) {
                return '#FF7500';
            } else if (e == 4) {
                return '#FF2033';
            } else {
                return '';
            }
        } else {
            if (e == '0') {
                return '极低危';
            } else if (e == '1') {
                return '低危';
            } else if (e == '2') {
                return '中危';
            } else if (e == '3') {
                return '高危';
            } else {
                return '极高危';
            }
        }
    }

    reflectDetail(riskLevel, data) {
        let result = [];
        // 0.15(入参值) - 0.1（映射值）  0 + (0.15 -0) /( 0.3 -0) * 0.2 = 0.1
        // 0.4（入参）- 0.3（映射值） 0.2 + （0.4-0.3） / (0.5 - 0.3) * 0.2 = 0.3
        // 按区间线性映射的函数
        function mapValue(value) {
            let riskArr = [
                riskLevel.lower,
                riskLevel.low,
                riskLevel.middle,
                riskLevel.high,
                riskLevel.higher,
                riskLevel.top,
            ];
            // 获取每个值对应区间的下标
            const getRiskIndex = (value) => {
                if (value < riskArr[0]) return 0; // 如果 value 小于最小的 riskArr 值，直接返回 0
                return riskArr.findIndex(
                    (riskValue, index) =>
                        value >= riskValue &&
                        value <= (riskArr[index + 1] || Infinity)
                );
            };
            let baseValue = riskLevel.top / (riskArr.length - 1);
            let reflectResult =
                baseValue * getRiskIndex(value) +
                ((value - riskArr[getRiskIndex(value)]) /
                    (riskArr[getRiskIndex(value) + 1] -
                        riskArr[getRiskIndex(value)])) *
                    baseValue;
            return value === 0 ? 0 : reflectResult;
        }

        // 遍历 mockData，进行映射
        data.forEach((value) => {
            let mappedValue = mapValue(value);
            result.push(mappedValue);
        });
        return result;
    }

    renderChart() {
        const riskValue = this.appEchartsDoubleYLine.riskValue;
        const originalData = this.appEchartsDoubleYLine.data; // 保留原始数据
        const colors = [
            '#ad84f4',
            '#eaffd0',
            '#fce38a',
            '#f38181',
            '#fcbad3',
            '#ada',
            '#11999e',
        ];
        const op = {
            title: {
                text: '',
            },
            legend: {
                show: true,
                textStyle: {
                    color: '#fff',
                },
                data: [],
                top: 0,
                right: 20, // 右边距，单位是像素
                orient: 'horizontal',
            },
            grid: {
                top: 30,
                left: 48,
                right: 0,
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    function getRiskLevel(value) {
                        if (value <= riskValue.low) {
                            return '极低危';
                        } else if (value <= riskValue.middle) {
                            return '低危';
                        } else if (value <= riskValue.high) {
                            return '中危';
                        } else if (value <= riskValue.higher) {
                            return '高危';
                        } else {
                            return '极高危';
                        }
                        return '未知'; // 如果超出范围
                    }
                    // 获取xAxis的日期 (日期信息在params[0]中)
                    const date = params[0].name; // params[0] 总是对应 xAxis 的日期
                    // 过滤掉第一个系列 (series[0])
                    const filteredParams = params.filter(
                        (item) =>
                            item.seriesIndex !== 0 && item.seriesIndex !== 1
                    );
                    let tooltipContent = `${date}<br>`; // 保留日期信息
                    // 生成每个非第一个系列的tooltip内容
                    filteredParams.forEach((item, index) => {
                        const marker =
                            item.marker ||
                            `<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${item.color};margin-right:5px;"></span>`;
                        // 使用原始数据中的值来获取风险等级
                        const originalValue =
                            originalData[index].data[item.dataIndex];
                        const riskLevel = getRiskLevel(originalValue); // 获取原始值的风险等级
                        tooltipContent += `${marker}${item.seriesName}: ${originalValue} (${riskLevel})<br>`;
                    });
                    return tooltipContent || '无数据';
                },
            },
            xAxis: [
                {
                    data: [],
                    type: 'category',
                    // name: '(时间)',
                    nameLocation: 'end',
                    axisLabel: {
                        color: '#009', // 设置文字颜色为白色
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff', // 设置 y 轴线为白色
                        },
                        onZero: false,
                    },
                    axisTick: {
                        show: true, // 隐藏刻度线
                        alignWithLabel: true,
                        lineStyle: {
                            color: '#ffffff', // 设置刻度线颜色为白色
                        },
                    },
                    offset: 0,
                },
                {
                    type: 'value',
                    name: '(11月)',
                    nameLocation: 'end',
                    min: 0,
                    max: 100,
                    show: false,
                    axisPointer: {
                        show: false, // 禁用 轴上的指示线
                    },
                },
            ],
            yAxis: [
                {
                    name: '等级',
                    boundaryGap: false,
                    type: 'value',
                    min: 0,
                    max: 1,
                    nameTextStyle: {
                        padding: [0, 0, 0, 45], // 左侧偏移 20px
                    },
                    splitLine: {
                        show: true, // 显示网格线
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.12)', // 设置网格线的颜色为灰色
                            type: 'solid', // 可以选择不同类型的网格线，默认是实线
                        },
                    },
                    axisLabel: {
                        color: '#ffffff', // 设置字体颜色为白色
                        formatter: function (value) {
                            if (value === 0) {
                                return '0\n风险值'; // 0刻度下显示“风险值”
                            }
                            return value.toFixed(2); // 其余值显示正常数值
                        },
                        padding: [10, 0, 0, 0], // 调整刻度标签与轴线的距离，向下偏移
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#ffffff', // 设置 y 轴线为白色
                        },
                    },
                    axisTick: {
                        show: false, // 隐藏刻度线
                        alignWithLabel: true,
                        lineStyle: {
                            color: '#ffffff', // 设置刻度线颜色为白色
                        },
                    },
                    axisPointer: {
                        show: false, // 禁用 y 轴上的指示线
                    },
                },
                {
                    name: '横着的',
                    type: 'category',
                    data: ['', '', '', '', ''],
                    show: false,
                    axisLabel: {
                        color: '#ffffff', // 设置字体颜色为白色
                    },
                    axisPointer: {
                        show: false, // 禁用 y 轴上的指示线
                    },
                },
            ],
            series: [],
        };
        const series: any = [
            {
                type: 'bar',
                yAxisIndex: 1,
                xAxisIndex: 1,
                data: [0, 0, 0, 0, 0, 2, 2],
                z: 100,
                itemStyle: {
                    color: (params) => {
                        return this.getBarColor(params.dataIndex, 'color');
                    },
                },
                label: {
                    normal: {
                        formatter: (params) => {
                            let rich = [
                                'lower',
                                'low',
                                'mid',
                                'high',
                                'higher',
                            ];
                            return `{${
                                rich[params.dataIndex]
                            }|${this.getBarColor(params.dataIndex, 'label')}}`;
                        },
                        rich: {
                            lower: { color: '#05D5FF' },
                            low: { color: '#00C824' },
                            mid: { color: '#FED833' },
                            high: { color: '#FF6000' },
                            higher: { color: '#FF2033' },
                        },
                        show: true,
                        position: 'right',
                        textStyle: {
                            fontSize: '16',
                        },
                    },
                },
                barWidth: '0.1%',
            },
            {
                type: 'line',
                name: '',
                data: [NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN],
                showSymbol: false,
                smooth: 0.1,
                lineStyle: {
                    color: '#5684FF',
                },
                markArea: {
                    data: [
                        [
                            {
                                yAxis: '0',
                                itemStyle: {
                                    color: 'rgba(5, 213, 255,0.1)',
                                },
                            },
                            {
                                yAxis: '0.2',
                            },
                        ],
                        [
                            {
                                yAxis: '0.2',
                                itemStyle: {
                                    color: 'rgba(0, 200, 36,0.1)',
                                },
                            },
                            {
                                yAxis: '0.4',
                            },
                        ],
                        [
                            {
                                yAxis: '0.4',
                                itemStyle: {
                                    color: 'rgba(254, 216, 51, .1)',
                                },
                            },
                            {
                                yAxis: '0.6',
                            },
                        ],
                        [
                            {
                                yAxis: '0.6',
                                itemStyle: {
                                    color: 'rgba(255, 117, 0, .1)',
                                },
                            },
                            {
                                yAxis: '0.8',
                            },
                        ],
                        [
                            {
                                yAxis: '0.8',
                                itemStyle: {
                                    color: 'rgba(255, 31, 49, .1)',
                                },
                            },
                            {
                                yAxis: '1',
                            },
                        ],
                    ],
                },
            },
        ];
        op.xAxis[0].data = this.appEchartsDoubleYLine.date;
        op.legend.data = this.appEchartsDoubleYLine.legend;
        this.appEchartsDoubleYLine.data.forEach((item, index) => {
            series.push({
                type: 'line',
                name: item.name, // 动态设置折线的名字
                data: item.data, // 动态设置折线的数据
                showSymbol: false, // 不显示节点
                smooth: 0.1, // 平滑展示
                color: colors[index % colors.length], // 动态设置颜色，避免超出数组长度
                lineStyle: {
                    // color: colors[index % colors.length], // 动态设置颜色，避免超出数组长度
                },
            });
        });
        // if (op.series.length > 1) {
        //     series[1].markArea = {
        //         data: [
        //             [
        //                 {
        //                     yAxis: '0',
        //                     itemStyle: {
        //                         color: 'rgba(5, 213, 255,0.1)',
        //                     },
        //                 },
        //                 {
        //                     yAxis: '0.2',
        //                 },
        //             ],
        //             [
        //                 {
        //                     yAxis: '0.2',
        //                     itemStyle: {
        //                         color: 'rgba(0, 200, 36,0.1)',
        //                     },
        //                 },
        //                 {
        //                     yAxis: '0.4',
        //                 },
        //             ],
        //             [
        //                 {
        //                     yAxis: '0.4',
        //                     itemStyle: {
        //                         color: 'rgba(254, 216, 51, .1)',
        //                     },
        //                 },
        //                 {
        //                     yAxis: '0.6',
        //                 },
        //             ],
        //             [
        //                 {
        //                     yAxis: '0.6',
        //                     itemStyle: {
        //                         color: 'rgba(255, 117, 0, .1)',
        //                     },
        //                 },
        //                 {
        //                     yAxis: '0.8',
        //                 },
        //             ],
        //             [
        //                 {
        //                     yAxis: '0.8',
        //                     itemStyle: {
        //                         color: 'rgba(255, 31, 49, .1)',
        //                     },
        //                 },
        //                 {
        //                     yAxis: '1',
        //                 },
        //             ],
        //         ],
        //     };
        // }
        if (this.appEchartsDoubleYLine.riskValue) {
            let riskValue = this.appEchartsDoubleYLine.riskValue;
            op.yAxis[0].axisLabel.formatter = function (value) {
                let reflect = {
                    0: '0\n风险值',
                    0.2: riskValue.low,
                    0.4: riskValue.middle,
                    0.6: riskValue.high,
                    0.8: riskValue.higher,
                    1: riskValue.top,
                };
                return reflect[value] || value;
            };
        }
        series.forEach((item, index) => {
            if (index >= 2) {
                item.data = this.reflectDetail(
                    this.appEchartsDoubleYLine.riskValue,
                    item.data
                );
            }
        });
        op.series = series;
        console.log(496, op);
        this.chart.clear();
        this.chart.setOption(op, false);
    }
    // 初始化画布，绑定resize事件
    initChart() {
        this.chart = init(this.el.nativeElement);
        fromEvent(window, 'resize')
            .pipe(takeUntil(this.destroy$), debounceTime(2000))
            .subscribe(() => {
                this.chart.resize();
            });
        if (this.appEchartsDoubleYLine.name === '专项整治分类') {
            this.chart.on('click', (param) => {
                // 这里可以进行点击事件的处理
                console.log(param);
            });
        }
    }

    // 解除resize
    relieve() {
        this.destroy$.next();
        this.destroy$.complete();
        if (this.chart) {
            this.chart.dispose();
        }
    }

    ngOnInit() {}

    ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
        const options = changes['appEchartsDoubleYLine'];
        if (
            options &&
            options.previousValue !== options.currentValue &&
            options.currentValue
        ) {
            this.relieve();

            this.initChart();
            this.renderChart();
        }
    }

    ngOnDestroy() {
        this.relieve();
    }

    resize(height, width) {
        if (this.chart) {
            this.chart.resize({ width: width, height: height });
        }
    }
}
